{% extends "base.html" %}

{% block title %}可视化批量销账平台{% endblock %}

{% block head %}
    {{ super() }}
    <script type=text/javascript src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/jquery-1.6.2.min.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/index.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/infographic.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/westeros.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/dark.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/shine.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/walden.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='js/theme/macarons.js') }}"></script>
{% endblock %}

{% block page_content %}
    {{ super() }}
    <div class="page-header">
        <h2>资源监控</h2>
        <p>The local date and time is <span style="color: red; ">{{ moment(current_time).format('YYYY-MM-DD HH:mm:ss') }}</span>.</p>
        <p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="tabbable" id="tabs-761953">

                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#panel-000" data-toggle="tab"><span class="glyphicon glyphicon-hd-video"></span>共享磁盘</a>
                        </li>
                        <li>
                            <a href="#panel-111" data-toggle="tab"><span class="glyphicon glyphicon-unchecked"></span>CPU&内存</a>
                        </li>
                        <li>
                            <a href="#panel-222" data-toggle="tab"><span class="glyphicon glyphicon-th"></span>TABLESPACE</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="panel-000">
                            <p></p>
                            <div id="chartmain6" style="width:1150px; height: 490px;"></div>
                        </div>

                        <div class="tab-pane fade" id="panel-111">
                            <p></p>
                            <div id="chartmain4" style="width:1150px; height: 455px;"></div>
                            <div class="btn-toolbar" role="toolbar" style="alignment: center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning" onclick="setReal('0')">实时监控</button>
                                    <button type="button" class="btn btn-danger" onclick="setReal('1')">趋势监控</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary" onclick="getChart('0')">asset 1</button>
                                    <button type="button" class="btn btn-primary" onclick="getChart('1')">asset 2</button>
                                    <button type="button" class="btn btn-primary" onclick="getChart('2')">asset 3</button>
                                    <button type="button" class="btn btn-primary" onclick="getChart('3')">asset 4</button>
                                    <button type="button" class="btn btn-primary" onclick="getChart('4')">asset 5</button>
                                    <button type="button" class="btn btn-primary" onclick="getChart('5')">asset 6</button>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="panel-222">
                            <p></p>
                            <div id="chartmain1" style="width:1150px; height: 490px;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}
